import React, { Component } from "react";

export default class Increment extends Component {
  state = {
    res: 0,
  };
  increment = () => {
    const { res } = this.state;
    const { value } = this.selectNumber;
    this.setState({ res: res + value * 1 });
  };
  decrement = () => {
    const { res } = this.state;
    const { value } = this.selectNumber;
    this.setState({ res: res - value * 1 });
  };
  incrementIfOdd = () => {
    const { res } = this.state;
    const { value } = this.selectNumber;
    if (res % 2 !== 0) {
      this.setState({ res: res + value * 1 });
    }
  };
  incrementAsync = () => {
    const { res } = this.state;
    const { value } = this.selectNumber;
    setTimeout(() => {
      this.setState({ res: res + value * 1 });
    }, 500);
  };
  render() {
    return (
      <div>
        <h1>当前求和为: {this.state.res}</h1>
        <select ref={(c) => (this.selectNumber = c)}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
        </select>
        &nbsp;
        <button onClick={this.increment}>+</button> &nbsp;
        <button onClick={this.decrement}>-</button> &nbsp;
        <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button> &nbsp;
        <button onClick={this.incrementAsync}>异步加</button>
      </div>
    );
  }
}
